#index {
    color: #d3d6dd;
    background-color: #000000;
    width: 100%;
    height: 100vh;

    .bg {
      padding: 0.2rem 0.2rem 0 0.2rem;
      background-image: url("../assets/pageBg.png");
      background-size: cover;
      background-position: center center;
    }

    .host-body {
      .title {
        position: relative;
        width: 6.25rem;
        text-align: center;
        background-size: cover;
        background-repeat: no-repeat;

        .title-text {
          font-size: 0.3rem;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
        }

        .title-bototm {
          position: absolute;
          bottom: -0.375rem;
          left: 50%;
          transform: translate(-50%);
        }
      }

      // 平行四边形
      .react-left {
        cursor: pointer;
        font-size: 0.225rem;
        width: 3.75rem;
        height: 0.625rem;
        line-height: 0.625rem;
        text-align: center;
        transform: skewX(-45deg);

        .react-after {
          position: absolute;
          right: -0.3125rem;
          top: 0;
          height: 0.625rem;
          width: 0.625rem;
          background-color: #1a5cd7;
          transform: skewX(45deg);
        }

        .text {
          display: inline-block;
          transform: skewX(45deg);
        }
      }

      .react-right {
        cursor: pointer;
        font-size: 0.225rem;
        width: 3.75rem;
        height: 0.625rem;
        line-height: 0.625rem;
        text-align: center;
        transform: skewX(45deg);

        .react-before {
          position: absolute;
          left: -0.3125rem;
          top: 0;
          height: 0.625rem;
          width: 0.625rem;
          background-color: #1a5cd7;
          transform: skewX(-45deg);
        }

        .text {
          display: inline-block;
          transform: skewX(-45deg);
        }
      }

      .body-box {
        margin-top: 0.2rem;
        display: flex;
        flex-direction: column;

        //下方区域的布局
        .content-box {
          display: grid;
          grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
        }

        // 底部数据
        .bototm-box {
          margin-top: 0.125rem;
          display: grid;
          grid-template-columns: repeat(2, 50%);
        }

        .login_box{
          width: 550px;
          height: 300px;
          // background-color:rgba(94, 89, 89, 0.5);
          margin: 0 auto;
          margin-top: 2%;
          text-align: center;
          padding-top: 5%;
          padding-right: 5%;
        }
      }
    }
  }
